<template>
  <div class="guowucheppop">
      <div class="cardtosd">
          <div class="topharder">
              <div class="tg">
                <van-nav-bar title="购物车" 
                @click-left="onClickLeft"
                @click-right="onClickRight"
                 left-arrow >
                    <template #right>
                        <van-icon name="user-o" size="18" />
                    </template>
                </van-nav-bar>
              </div>
          </div>
          <div class="cardlists">
              <div class="kca" v-for="(item) in shopinglist" :key="item.goodsId" >
                  <div class="van-card" >
                      <div class="boxtogo">
                          <van-checkbox v-model="item.checked" @click="checkedto(item.goodsId)"></van-checkbox>
                      </div>
                      <div class="van-card__thumb">
                          <div class="van-image" style="width: 100%; height: 100%;">
                          <img :src="item.goodsId_img" class="van-image__img" style="object-fit: cover;">
                          </div>
                      </div>
                      <div class="van-card__content">
                          <div>
                              <div class="van-card__title van-multi-ellipsis-tan">{{item.name}}</div>
                              <div class="van-card__desc van-ellipsis">{{item.tilie}}</div>
                              <span class="van-tag van-tag--plain van-tag--danger">今日特价</span>
                          </div>
                          <div class="buotopl">
                              <div class="van-card__bottom">
                                  <div class="van-card__price">
                                    <div>
                                        <span class="van-card__price-currency">¥</span>
                                        <span class="van-card__price-integer">{{item.price}}</span>
                                    </div>
                                  </div>
                               </div>
                               <div class="munspl">
                                    <div class="item ji" @click="sub(item.goodsId)">
                                        <span>-</span>
                                    </div>
                                    <div class="item mun">
                                        <span>{{item.num}}</span>
                                    </div>
                                    <div class="item ji" @click="add(item.goodsId)">
                                        <span>+</span>
                                    </div>
                               </div>
                          </div>
                      </div>
                  </div>
                  <div class="botput">
                     <span class="iconfont icon-shanchu" @click="del(item.goodsId)"></span>
                   </div>  
              </div>
              <div class="pulipi" v-if="shopinglist =='' ">
                  <van-empty
                    class="custom-image"
                    image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
                    description="购物车空了快去购物吧"
                    />
              </div> 
          </div>
          <div class="bottomto" v-if="shopinglist !='' ">
              <div class="moto">
                  <van-submit-bar  :price="pricetotal" button-text="结算" @submit="onSubmit">
                    <van-checkbox v-model="checkedAll" @click="checkAll">全选</van-checkbox>
                  </van-submit-bar>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { NavBar,Toast,SubmitBar,Card,Search } from 'vant';
// import { template} from 'vant'; Vue.use(template);
Vue.use(NavBar);
Vue.use(SubmitBar);
Vue.use(Card);
Vue.use(Search);
import { Empty } from 'vant';
Vue.use(Empty);

// import { Icon } from 'vant';
// Vue.use(Icon);
import { Button ,checkbox,tag,icon } from 'vant';
Vue.use(Button).use(checkbox).use(tag).use(icon);

export default {
    data(){
        return{
            // pricetotal:0,
            shopinglist:[
                // {
                //     name:"吧唧饭馆 颗粒花生酱",
                //     goodsId:12,
                //     tilie:"吧唧饭馆 颗粒花生酱 0糖0添加高蛋白200g*2瓶装（海盐颗粒+原味颗粒）",
                //     biao:"",
                //     num:3,
                //     price:30.03,
                //     checked:false,
                //     goodsId_img:'https://cp1.douguo.com/upload/tuan/6/2/e/448_62d58703c7177fd3d8ae518bd843b34e.jpg'
                // },
                // {
                //     name:"吧唧饭馆 颗粒花生酱",
                //     goodsId:13,
                //     tilie:"吧唧饭馆 颗粒花生酱 0糖0添加高蛋白200g*2瓶装（海盐颗粒+原味颗粒）",
                //     biao:"",
                //     num:3,
                //     price:30,
                //     checked:false,
                //     goodsId_img:'https://cp1.douguo.com/upload/tuan/6/2/e/448_62d58703c7177fd3d8ae518bd843b34e.jpg'
                // },
                // {
                //     name:"吧唧饭馆 颗粒花生酱",
                //     goodsId:14,
                //     tilie:"吧唧饭馆 颗粒花生酱 0糖0添加高蛋白200g*2瓶装（海盐颗粒+原味颗粒）",
                //     biao:"",
                //     num:3,
                //     price:30,
                //     checked:false,
                //     goodsId_img:'https://cp1.douguo.com/upload/tuan/6/2/e/448_62d58703c7177fd3d8ae518bd843b34e.jpg'
                // }
            ],
            // checkedAll:false,
            checlis:[] 
        }
    },
    methods:{
        onClickEditAddress(){

        },
        onSubmit(){
            let listgoto = [] ;
            let isdf =this.shopinglist;
            let asd=[];
            isdf.forEach((ele)=>{
                if(ele.checked==true){
                    listgoto.push(ele);
                    
                }else if(ele.checked==false){
                    asd.push(ele);
                }
            })
            console.log(listgoto)
            window.sessionStorage.setItem('userArr',JSON.stringify(listgoto));//存数据
            
           
             window.sessionStorage.setItem('shpinglist',JSON.stringify(asd));//存数据
             this.$router.push('/order');
            if(listgoto ==''){
               Toast('请勾选商品');
            }  
            
              
        },
        onClickLeft() {
            this.$router.go(-1)
        //   Toast('返回');
        },
        onClickRight() {
           this.$router.push('/mine');
        },
        sub(id){
            // let index = this.playerLists.findIndex(item=>item.id==id);
            let index = this.shopinglist.findIndex(item=>item.goodsId == id)
            
            if(this.shopinglist[index].num <=1){
                this.shopinglist[index].num =1;
            }else{
                this.shopinglist[index].num -=1;
            }
        },
        add(id){
            // let index = this.playerLists.findIndex(item=>item.id==id);
            let index = this.shopinglist.findIndex(item=>item.goodsId == id)
            if(this.shopinglist[index].num >=200){
                this.shopinglist[index].num =200;
            }else{
                this.shopinglist[index].num +=1;
            }
        },
        checkAll(){
            this.checkedAll !=this.checkedAll;
            if(this.checkedAll==true){
                this.shopinglist.forEach(lel=>{
                    lel.checked=true
                })
            }else{
                this.shopinglist.forEach(lel=>{
                    lel.checked=false
                })
            }
        },
        checkedto(id){
            let index = this.shopinglist.findIndex(item=>item.goodsId == id);
            this.shopinglist[index].checked != this.shopinglist[index].checked;
            if(this.shopinglist[index].checked==true){
                this.checlis.push(this.shopinglist[index].checked)
            }
        },
        del(id){
             let index = this.shopinglist.findIndex(item=>item.goodsId == id);
             this.shopinglist.splice(index,1);
             console.log(this.shopinglist)
            window.sessionStorage.setItem('shpinglist',JSON.stringify(this.shopinglist));//存数据
        },
        gettolidt(){
             let shpinglist = JSON.parse(sessionStorage.getItem('shpinglist'));//取数据
             if(shpinglist){
                 shpinglist.forEach(lel=>{
                        // console.log(lel)
                        let {name,goodsId_img,title,goodsId,sto,price,num} =lel
                        let data = {
                            name:name,
                            goodsId_img:goodsId_img,
                            title:title,
                            goodsId:goodsId,
                            sto:sto,
                            price:price,
                            num:num,
                            checked:false,
                        }
                        this.shopinglist.push(data)
                        // console.log(data)
                 })
             }
             let onBuyphy = JSON.parse(sessionStorage.getItem('onBuyphy'));//取数据
            //  console.log(onBuyphy)
             if(onBuyphy !=''){   
                 let data = {
                    name:onBuyphy.name,
                    goodsId_img:onBuyphy.goodsId_img,
                    title:onBuyphy.title,
                    goodsId:onBuyphy.goodsId,
                    sto:onBuyphy.sto,
                    price:onBuyphy.price,
                    num:onBuyphy.num,
                    checked:false,
                 }
                let index = this.shopinglist.findIndex(item=>item.goodsId==data.goodsId)
                if(index !=-1){
                    this.shopinglist[index].num += data.num ;
                    this.shopinglist.push(data);
                }else{
                    this.shopinglist.push(data);
                }
               
             }
            
        },
        getaddto(){
        }
    },
    computed:{
        pricetotal:function(){
            return this.shopinglist.reduce((pricetotal,item)=>{
                if(item.checked){
                    return pricetotal += (item.price * item.num)*100;
                }else{
                    return pricetotal;
                }
            },0)
        },
        checkedAll:{
            // 获取值
            get(){
                 return this.shopinglist.every(item=>{
                     return item.checked; //只要一个false不满足条件，返回false
                 })
             },
             // 修改值
             set(val){
                 this.shopinglist.forEach((item)=>{
                     item.checked = val;
                 })
             }
        }
    },
    watch:{
        
    },
    created(){
        this.gettolidt();
    }

    
}
</script>

<style lang="less">
    .guowucheppop{
        width: 100%;
        height: 100%;
        z-index: 30;
    }
    .cardtosd{
        width: 100%;
        height: 100%;
        z-index: 30;
        position: fixed;
        overflow-y: scroll;
        overflow-x: hidden;
        background-color: #fff;
        .topharder{
            width: 100%;
            height: 40px;
            .tg{
                width: 100%;
                height: 40px;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 89;
                background-color: #fff;
                .van-nav-bar__content{
                    i{
                        color: #323233;
                    }
                }
            }
        }
        .bottomto{
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            .moto{
                width: 100%;
                height: 100%;
            }
        }
        .cardlists{
            width: 100%;
            margin-top: 10px;    
            .kca{
                width: 100%;
                margin-top: 10px;
                padding-left: 10px;
                padding-right: 10px;
                box-sizing: border-box;
                position: relative;
                .van-card {
                    width: 100%;
                    display: flex;
                    position: relative;
                    box-sizing: border-box;
                    padding: 8px 16px;
                    border-radius: 8px;
                    color: #323233;
                    font-size: 14px;
                    background-color: #fafafa;
                    align-items: center;
                    .boxtogo{
                        width: 10%;
                        height: 100%;
                        display: flex;
                    }
                   
                }
                .botput{
                    width: 10%;
                    right: 2px;
                    top: 3px;
                    position: absolute;
                    height: 30px;
                    span{
                        &.iconfont{
                            font-size: 20px;
                        }
                    }
                }
                .van-card__thumb{
                    position: relative;
                    -webkit-box-flex: 0;
                    -webkit-flex: none;
                    flex: none;
                    width: 95px;
                    height: 95px;
                    margin-right: 8px;
                }
                .van-card__conten{
                    position: relative;
                    display: -webkit-box;
                    display: -webkit-flex;
                    display: flex;
                    -webkit-box-flex: 1;
                    -webkit-flex: 1;
                    flex: 1;
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                    -webkit-flex-direction: column;
                    flex-direction: column;
                    -webkit-box-pack: justify;
                    -webkit-justify-content: space-between;
                    justify-content: space-between;
                    min-width: 0;
                    min-height: 95px;
                    
                }
                .van-card__title {
                    max-height: 32px;
                    width: 90%;
                    overflow: hidden;
                    font-weight: 500;
                    line-height: 16px;
                }
                .cardtosd .cardlists .kca .van-card__title {
                    max-height: 32px;
                    font-weight: 500;
                    line-height: 16px;
                }
                .van-multi-ellipsis-tan{
                    display: -webkit-box;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                .van-card__desc {
                    max-height: 20px;
                    color: #646566;
                    line-height: 20px;
                }
                .van-ellipsis {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                .buotopl{
                    width: 100%;
                    height: 25px;
                    display: flex;
                    justify-content:space-between;
                    .van-card__bottom {
                        line-height: 20px;
                        .van-card__price {
                            display: inline-block;
                            color: #323233;
                            font-weight: 500;
                            font-size: 12px;
                        }
                    }
                    .munspl{
                        // width: 40%;
                        height: 100%;
                        overflow: hidden;
                        display: flex;
                        .item{
                            // width:30%;
                            height: 20px;
                            border:1px solid #646566;
                            padding-left: 10px;
                            padding-right: 10px;
                            text-align: center;
                            line-height: 20px;
                        }
                        .ji{
                            span{
                                font-size: 20px;
                            }
                        }
                        .mun{
                            width:40%;
                        }
                        
                    }
                }
                
                    
                
                
            }
            .pulipi{
                width: 100%;
                margin-top: 100px;
                height: 300px;
                 .custom-image .van-empty__image {
                    width: 90px;
                    height: 90px;
                }
            }
        }
    }
     
</style>